<template>
	<view>
		<view class="topbar">
			<u--input class="search" placeholder="焦作市山阳区人民路32号" prefixIcon="map-fill"
				prefixIconStyle="font-size: 22px; color: #909399" shape="circle">
				<template v-slot:suffix>
					<view style="display: flex; align-items: center;">
						<u-icon name="reload" style="font-size: 22px; color: #909399;"></u-icon>
						<text style="font-size: 14px; color: #909399; margin-left: 5px;">刷新</text>
					</view>
				</template>
			</u--input>
		</view>
		<view class="card-container">
			<view class="card">
				<view class="content">
					<view class="item">
						<view @click="toServe" class="item-bg" style="background: linear-gradient(to bottom right, #4693F5, #514EF2);">
							<image style="width: 100rpx; height: 50rpx;" class="img"
								src="/static/kun/index/车辆维修1-01@2x.png"></image>
						</view>
						<text class="label">汽车维修</text>
					</view>
					<view @click="toCarMaintenance" class="item">
						<view class="item-bg" style="background: linear-gradient(to bottom right, #FEC448, #FEA13A);">
							<image class="img" src="/static/kun/index/保养@2x.png"></image>
						</view>
						<text class="label">汽车保养</text>
					</view>
					<view @click="toSpecialtyWashCar" class="item">
						<view class="item-bg" style="background: linear-gradient(to bottom right, #AFEF4E, #42D731);">
							<image class="img" src="/static/kun/index/洗车@2x.png"></image>
						</view>
						<text class="label">专业洗车</text>
					</view>
					<view class="item" @click="tzjjjy">
						<view class="item-bg" style="background: linear-gradient(to bottom right, #86C0FE, #4187F9);">
							<image class="img" src="/static/kun/index/加油枪 (1)@2x.png"></image>
						</view>
						<text class="label">就近加油</text>
					</view>
				</view>
			</view>
			<view class="card1">
				<view class="map-card">
					<view class="header">
						<view class="map-card-text">
							<text class="title">附近加油站</text>
							<text class="subtitle">根据您的位置推荐最近的加油站</text>
						</view>
						<text class="more">更多 &gt;</text>
					</view>
					<view class="map-container">
						<map style="width: 100%; height: 200px;" :latitude="latitude" :longitude="longitude"
							:markers="markers">
						</map>
					</view>
				</view>
			</view>
			<view class="card2">
				<view class="map-card">
					<view class="header">
						<view class="map-card-text">
							<text class="title">优惠团购</text>
							<text class="subtitle">钜惠袭来 为您的爱车续航</text>
						</view>
						<text class="more">更多 &gt;</text>
					</view>
					<view class="groupon">
						<view>
							<image src="/static/kun/index/TG1.png"
								style="width: 300rpx; height: 175rpx; border-radius: 20rpx;"></image>
							<text>汽车惠民走进...</text>
						</view>
						<view>
							<image src="/static/kun/index/TG2.png"
								style="width: 300rpx; height: 175rpx; border-radius: 20rpx;"></image>
							<text>汽车惠民走进...</text>
						</view>
						<view>
							<image src="/static/kun/index/TG1.png"
								style="width: 300rpx; height: 175rpx; border-radius: 20rpx;"></image>
							<text>汽车惠民走进...</text>
						</view>
						<view>
							<image src="/static/kun/index/TG2.png"
								style="width: 300rpx; height: 175rpx; border-radius: 20rpx;"></image>
							<text>汽车惠民走进...</text>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="footbut">
			<image class="footimg" src="../../static/kun/index/示警@2x.png"></image>
		</view>
		<CustomTabbar :current="currentTab" class="tabBar"></CustomTabbar>
	</view>
</template>

<script>
import CustomTabbar from '../../components/custom-tabbar.vue';
	export default {
		components: {
			CustomTabbar
		},
		data() {
			return {
				currentTab: 'home',
				latitude: 39.909, // 起始纬度
				longitude: 116.39742, // 起始经度
				markers: [{
					latitude: 39.909,
					longitude: 116.39742,
					title: '北京天安门',
					iconPath: '/static/marker.png', // 确保有此图标路径
					width: 30,
					height: 30
				}]
			}
		},
		methods: {
			toCarMaintenance(){
				uni.navigateTo({
					url:'/pages/CarMaintenance/CarMaintenance'
				})
			},
			toSpecialtyWashCar(){
				uni.navigateTo({
					url:'/pages/specialtyWashCar/specialtyWashCar'
				})
			},
			toServe(){
				uni.navigateTo({
					url:'/pages/lly/service1/service1'
				})
			}		
		}
	}
</script>

<style>
	.footbut {
		width: 120rpx;
		/* 圆的直径 */
		height: 120rpx;
		/* 圆的直径 */
		background: linear-gradient(to bottom right,#FEA14C, #FF480C);
		/* 设置背景色为红色 */
		border-radius: 50%;
		/* 将元素变为圆形 */
		position: fixed;
		/* 固定在屏幕底部 */
		bottom: 35rpx;
		/* 与页面底部对齐 */
		left: 315.5rpx;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		z-index: 1000;
	}

	.footimg {
		position: fixed;
		/* 固定在屏幕底部 */
		bottom: 70rpx;
		/* 与页面底部对齐 */
		left: 345rpx;
		width: 60rpx;
		/* 占满宽度 */
		height: 60rpx;
		/* 合适的高度 */
		align-items: center;
		z-index: 1000;
		/* 确保位于内容的上方 */
	}

	.tabBar {
		position: fixed;
		/* 固定在屏幕底部 */
		bottom: 0;
		/* 与页面底部对齐 */
		left: 0;
		width: 100%;
		/* 占满宽度 */
		height: 100rpx;
		/* 合适的高度 */
		display: flex;
		justify-content: space-around;
		align-items: center;
		z-index: 999;
		/* 确保位于内容的上方 */
	}

	.container {
		padding-bottom: 60rpx;
		/* 确保内容不被自定义tab遮挡 */
	}

	.footbar {
		height: 100rpx;
		width: 100%;
	}

	.card-container {
		position: relative;
		/* 确保子元素基于此定位 */
		width: 100%;
		/* 父容器宽度 */
		padding-top: 200rpx;
		/* 避开 topbar */
	}

	.groupon {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.groupon view {
		width: 250rpx;
		height: 275rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.map-card-text {
		display: flex;
		flex-direction: column;
	}

	.map-card {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 20rpx;
		width: 90%;
		margin: 10rpx auto;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}

	.subtitle {
		font-size: 10px;
		color: #666;
	}

	.more {
		font-size: 14px;
		color: #409EFF;
	}

	.map-container {
		border-radius: 15rpx;
		overflow: hidden;
	}

	.card,
	.card1,
	.card2 {
		border-radius: 20rpx;
		background-color: #ffffff;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
		padding: 20rpx;
		width: 90%;
		margin: 10rpx auto;
		position: relative;
		/* 相对父容器定位 */
		z-index: 20;
		/* 合理设置层级 */
	}

	.card {
		margin-top: -300rpx;
		/* 控制整体偏移 */
	}

	.card1 {
		position: absolute;
		/* 独立控制位置 */
		top: 200rpx;
		left: 0;
		right: 0;
		margin: 0 auto;
		z-index: 20;
	}

	.card2 {
		position: absolute;
		/* 独立控制位置 */
		top: 830rpx;
		/* 根据需要调整 */
		left: 0;
		right: 0;
		margin: 0 auto;
		z-index: 20;
	}

	.content {
		display: flex;
		justify-content: space-between;
	}

	.item {
		width: 45%;
		/* 每个项目的宽度 */
		margin-bottom: 15rpx;
		/* 增加间距，确保项目之间不会紧贴 */
		text-align: center;
		/* 文字居中 */
		margin: 20rpx 20rpx;
	}

	.item-bg {
		width: 100%;
		height: 130rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		position: relative;
		/* 确保 z-index 生效 */
		z-index: 20;
		/* 提高层级 */
	}

	.img {
		width: 80rpx;
		/* 确保图片填满容器 */
		height: 60rpx;
		/* 根据容器大小调整 */
		border-radius: 20rpx;
		object-fit: cover;
		position: relative;
		z-index: 21;
		/* 确保在容器上层 */
	}

	.label {
		display: block;
		margin-top: 8rpx;
		font-size: 16px;
		font-weight: 540;
		color: #333;
	}

	.topbar {
		position: relative;
		/* 保持相对定位 */
		width: 100%;
		height: 200px;
		background-image: url("/static/kun/index/图层 1@2x.png");
		background-size: cover;
		background-position: center;
		z-index: 10;
		margin-top: -88rpx;
	}

	.search {
		position: absolute;
		/* 绝对定位 */
		top: 110rpx;
		/* 距离 .topbar 顶部的位置 */
		left: 18rpx;
		width: 90%;
		background-color: white;
	}
</style>